<template>
  <!-- 参数推荐 -->
  <div class="ParamRec" v-if="showBox">
    <div class="title">
      <p>Parameter recommendation</p>
      <i class="far fa-times-circle" @click="sedMsg()"></i>
    </div>
    <div class="content">
      <div class="curParam">
        <h1>Current parameter</h1>
        <el-table
          :data="tableData"
          style="width: 100%; border-radius: 4px"
          height="300"
        >
          <el-table-column fixed prop="param" label="Param" width="80">
          </el-table-column>
          <el-table-column prop="value" label="Value" width="80">
          </el-table-column>
        </el-table>
      </div>
      <div class="recParam">
        <div class="recContain">
          <h1>Basin characteristics</h1>
          <el-form ref="form" label-width="125px">
            <el-form-item label="Soil">
              <el-select
                placeholder="Soil type"
                v-model="BasinsimIndicator.soil"
              >
                <el-option label="Sand" value="sand"></el-option>
                <el-option label="Clay" value="clay"></el-option>
                <el-option label="Loam" value="loam"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="Topography">
              <el-select
                placeholder="Terrain type"
                v-model="BasinsimIndicator.topography"
              >
                <el-option label="Plateau" value="plateau"></el-option>
                <el-option label="Plain" value="plain"></el-option>
                <el-option label="Mountainous" value="mountainous"></el-option>
                <el-option label="Hill" value="hill"></el-option>
                <el-option label="Basin" value="basin"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="LandUse">
              <el-select
                placeholder="LandUse type"
                v-model="BasinsimIndicator.landUse"
              >
                <el-option
                  label="Cultivated_land"
                  value="cultivated_land"
                ></el-option>
                <el-option label="Forest" value="forest"></el-option>
                <el-option label="Grass_land" value="grass_land"></el-option>
                <el-option label="Wetland" value="wetland"></el-option>
                <el-option label="Bare_land" value="bare_land"></el-option>
                <el-option
                  label="Permanent_snow_ice"
                  value="permanent_snow_ice"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="Precipitation">
              <el-select
                placeholder="Climate type"
                v-model="BasinsimIndicator.precipitation"
              >
                <el-option label="Humid" value="humid"></el-option>
                <el-option label="Semi_humid" value="semi_humid"></el-option>
                <el-option label="Arid" value="arid"></el-option>
                <el-option label="Semi_arid" value="semi_arid"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="Season">
              <el-select
                placeholder="Season type"
                v-model="BasinsimIndicator.season"
              >
                <el-option label="Spring" value="spring"></el-option>
                <el-option label="Summer" value="summer"></el-option>
                <el-option label="Autumn" value="autumn"></el-option>
                <el-option label="Winter" value="winter"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="CatchmentArea">
              <el-select
                placeholder="Basin size"
                v-model="BasinsimIndicator.catchmentArea"
              >
                <el-option label="Large(>1000km²)" value="large"></el-option>
                <el-option
                  label="Medium(100-1000km²)"
                  value="medium"
                ></el-option>
                <el-option label="Small(<100km²)" value="small"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="paramRec">Param Rec</el-button>
        </div>
      </div>
      <div class="recParamInfo">
        <h1>Parameter Information</h1>
        <div class="infoContent">
          <div
            class="info"
            style="
              width: 90px;
              margin-left: 10px;
              margin-right: 10px;
              height: 100%;
            "
          >
            <p style="color: #909399; font-weight: bold; margin-top: 15px">
              Param List
            </p>
            <div v-for="(item, index) in recParam" :key="index">
              <el-button class="param_btn" @click="viewParams(index)">
                {{ item.name }}</el-button
              >
            </div>
          </div>
          <div class="info">
            <el-table
              :data="recParamTable"
              style="border-left: solid; border-width: thin; width: 100%"
              height="300"
            >
              <el-table-column fixed prop="Name" label="Param" width="80">
              </el-table-column>
              <el-table-column prop="Value" label="Value" width="80">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <el-button type="primary" @click="sedMsg('save')">Save</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { config } from "../../plugins/config.js";
import axios from "axios";
export default {
  name: "Children",
  props: ["msg"],
  data() {
    return {
      myMsg: this.msg,
      showBox: this.msg.showTag,
      sentToPar: {
        showTag: false,
        parameter: {},
      },
      curParam: [], //当前参数
      recParam: [
        {
          name: "param1",
          parameter: [
            {
              Name: "IMP ",
              Value: "0.02",
            },
            {
              Name: "FE",
              Value: "0.7",
            },
            {
              Name: "WUM",
              Value: "23",
            },
            {
              Name: "WLM",
              Value: "36",
            },
            {
              Name: "WDM",
              Value: "63",
            },
            {
              Name: "B",
              value: "2",
            },
            {
              Name: "KC",
              Value: "1",
            },
            {
              Name: "C",
              Value: "0.26",
            },
            {
              Name: "SM",
              Value: "30",
            },
            {
              Name: "EX",
              Value: "1.6",
            },
            {
              Name: "KSS",
              Value: "0.23",
            },
            {
              Name: "KG",
              Value: "0.2",
            },
            {
              Name: "KKG",
              Value: "0.96",
            },
            {
              Name: "KKSS",
              Value: "0.85",
            },
          ],
        },
        {
          name: "param2",
          parameter: [
            {
              Name: "IMP1414",
              Value: "0.02",
            },
            {
              Name: "FE",
              Value: "0.7",
            },
            {
              Name: "WUM",
              Value: "23",
            },
            {
              Name: "WLM",
              Value: "36",
            },
            {
              Name: "WDM",
              Value: "63",
            },
            {
              Name: "B",
              Value: "2",
            },
            {
              Name: "KC",
              Value: "1",
            },
            {
              Name: "C",
              Value: "0.26",
            },
            {
              Name: "SM",
              Value: "30",
            },
            {
              Name: "EX",
              Value: "1.6",
            },
            {
              Name: "KSS",
              Value: "0.23",
            },
            {
              Name: "KG",
              Value: "0.2",
            },
            {
              Name: "KKG",
              Value: "0.96",
            },
            {
              Name: "KKSS",
              Value: "0.85",
            },
          ],
        },
      ], //推荐参数
      tableData: [
        {
          param: "IMP ",
          value: "0.02",
        },
        {
          param: "FE",
          value: "0.7",
        },
        {
          param: "WUM",
          value: "23",
        },
        {
          param: "WLM",
          value: "36",
        },
        {
          param: "WDM",
          value: "63",
        },
        {
          param: "B",
          value: "2",
        },
        {
          param: "KC",
          value: "1",
        },
        {
          param: "C",
          value: "0.26",
        },
        {
          param: "SM",
          value: "30",
        },
        {
          param: "EX",
          value: "1.6",
        },
        {
          param: "KSS",
          value: "0.23",
        },
        {
          param: "KG",
          value: "0.2",
        },
        {
          param: "KKG",
          value: "0.96",
        },
        {
          param: "KKSS",
          value: "0.85",
        },
      ],
      recParamTable: [
        {
          Name: "IMP ",
          Value: "0.02",
        },
        {
          Name: "FE",
          Value: "0.7",
        },
        {
          Name: "WUM",
          Value: "23",
        },
        {
          Name: "WLM",
          Value: "36",
        },
        {
          Name: "WDM",
          Value: "63",
        },
        {
          Name: "B",
          Value: "2",
        },
        {
          Name: "KC",
          Value: "1",
        },
        {
          Name: "C",
          Value: "0.26",
        },
        {
          Name: "SM",
          Value: "30",
        },
        {
          Name: "EX",
          Value: "1.6",
        },
        {
          Name: "KSS",
          Value: "0.23",
        },
        {
          Name: "KG",
          Value: "0.2",
        },
        {
          Name: "KKG",
          Value: "0.96",
        },
        {
          Name: "KKSS",
          Value: "0.85",
        },
      ],
      model: "",
      BasinsimIndicator: {
        soil: "",
        topography: "",
        landUse: "",
        precipitation: "",
        season: "",
        catchmentArea: "",
      },
    };
  },
  methods: {
    viewParams(index) {
      this.recParamTable = this.recParam[index].parameter;
      this.model = this.recParam[index].name;
    },
    paramRec() {
      const _this = this;
      this.BasinsimIndicator.model = this.msg.model;
      var postData = this.BasinsimIndicator;
      axios.post(config.ip + "ParaRec", postData).then((resp) => {
        _this.recParam = resp.data;
      });
    },
    sedMsg(type) {
      this.showBox = !this.showBox;
      this.sentToPar.showTag = this.showBox;
      if (type === "save") {
        this.sentToPar.parameter = {
          model: this.model,
          param: this.recParamTable,
        };
      }
      // 通过自定义事件addNum把值传给父组件
      this.$emit("paramRecInfo", this.sentToPar);
    },
  },
};
</script>

<style>
.ParamRec {
  position: absolute;
  z-index: 10;
  width: 850px;
  height: fit-content;
  padding-bottom: 20px;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);

  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 2px;
  background-color: #f5f5f5;
}
.ParamRec .title {
  width: 100%;
  height: fit-content;
  background-color: rgb(20, 121, 215);
  box-sizing: border-box;
  padding: 5px 10px 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ParamRec .title p {
  font-size: 18px;
  color: white;
}
.ParamRec .title i {
  font-size: 18px;
  color: white;
}
.ParamRec .content {
  width: 100%;
  height: 100%;
  display: flex;
}
.ParamRec .content .curParam {
  height: fit-content;
  width: fit-content;
  background: white;
  border: rgb(206, 199, 199);
  border-style: solid;
  border-width: thin;
  border-radius: 4px;
  margin: 20px 20px 0px 20px;
  padding: 5px 5px;
}
.ParamRec .content .curParam h1 {
  font-size: 18px;
  color: rgb(20, 121, 215);
  font-weight: bold;
  margin: 2px 0px;
}
.ParamRec .content .recParam {
  height: fit-content;
  width: fit-content;
  display: flex;
  /* background: red; */
  border: rgb(206, 199, 199);
  border-style: solid;
  border-width: thin;
  border-radius: 4px;
  margin: 20px 0px 0px 0px;
  padding: 5px 5px;
}
.ParamRec .content .recParam h1 {
  font-size: 18px;
  color: rgb(20, 121, 215);
  font-weight: bold;
  margin: 2px 0px;
}
.ParamRec .el-form-item {
  margin-bottom: 10px;
}
.ParamRec .el-button--primary {
  height: 35px;
}
.ParamRec .content .recParamInfo {
  height: fit-content;
  width: fit-content;
  background: white;
  border: rgb(206, 199, 199);
  border-style: solid;
  border-width: thin;
  border-radius: 4px;
  margin: 20px 20px 0px 20px;
  padding: 5px 5px;

  /* display: flex; */
}
.ParamRec .content .recParamInfo h1 {
  font-size: 18px;
  color: rgb(20, 121, 215);
  font-weight: bold;
  margin: 2px 0px;
}
.ParamRec .content .recParamInfo .infoContent {
  display: flex;
}
.ParamRec .content .recParamInfo .infoContent .info {
  height: fit-content;
  width: fit-content;
}
.ParamRec .content .recParamInfo .infoContent .info .param_btn {
  color: black;
  border: none;
  font-size: 16px;
  padding: 0px;
  height: 30px;
  margin-left: 5px;
}
</style>